/*
  学习目标：
  受控组件-hooks版
    1. 表单元素的值， 受state的控制
    2. onChange配合setState， 修改状态
*/

import { useState } from 'react';

// 自定hooks，封装通用受控组件逻辑
//    1. 是一个函数
//    2. 函数内部封装了状态和方法
//    3. 特殊： use + 驼峰命名
function useFormInput() {
  const [value, setValue] = useState('');
  const onChange = (e) => setValue(e.target.value);

  return {
    value,
    onChange,
  };
}

export default function App() {
  const name = useFormInput();
  const mobile = useFormInput();
  return (
    <div>
      <input
        // 🔔{...name} 相当于把name身上所有的键复制到input标签的属性上
        {...name}
      />
      <input {...mobile} type="text" name="mobile" />
    </div>
  );
}

const obj = {
  name: 'zs',
  hobby: '123',
};

const newObj = {
  age: 19,
  // 🔔复制obj所有的键到newObj中
  ...obj,
};

console.log('newObj  ----->  ', newObj);
